<template>
  <!-- halo-box的作用是把自创组件进行flex操作 -->
  <!-- halo-item的作用是固定自创组件的大小，自创组件size要和外部盒子一致 -->
  <view class="halo-item">
    <halo :percent="item.percent" :size="item.size" :strokeWidth="item.strokeWidth" :progressColor="item.progressColor">
      <view class="txt">
        {{ item.txt }}
      </view>
      <view class="num">
        {{ item.num }}
        <text v-if="item.unit" class="wd">{{ item.unit }}</text>
      </view>
    </halo>
  </view>
</template>

<script setup>
import halo from '@/components/halo/halo.vue';

const props = defineProps({
  item: {
    type: Object,
    required: true
  }
});
</script>

<style scoped lang="scss">
.halo-item {
  width: 312rpx;
  height: 312rpx;
  position: relative;
  margin-top: 42rpx;
  margin-left: 30rpx;
}

.txt {
  position: absolute;
  top: 72rpx;
  left: 50%;
  transform: translateX(-50%);
  font-size: 25rpx;
  color: #666666;
}

.num {
  position: absolute;
  top: 147rpx;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: baseline; /* 垂直对齐基线 */
  font-size: 62rpx;
  color: #666666;
  font-weight: 600;
}

.wd {
  font-size: 40rpx; /* 调整单位字体大小 */
  margin-left: 5rpx; /* 添加左右间距 */
}
</style>